<template>
  <div class="group-chat">
    <div class="chat-search">
      <el-form :inline="true" :model="search" class="demo-form-inline" label-width="80px">
        <div class="al-flex-row-wrap">
          <div class="search-column">
            <el-form-item label="群名称">
              <el-input size="small" class="search-width" v-model="search.chatName" placeholder="请输入用户昵称"></el-input>
            </el-form-item>
          </div>
          <div class="search-column">
            <!--            style="width: 470px"-->
            <el-form-item label="创建时间">
              <el-date-picker v-model="search.time"
                              :picker-options="pickers"
                              size="small"
                              type="daterange"
                              value-format="yyyy-MM-dd"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              align="right">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="search-column">
            <el-form-item label="客户状态">
              <el-select size="small" class="search-width" v-model="search.status" placeholder="用户状态" clearable>
                <el-option label="正常" value="1"></el-option>
                <el-option label="已解散" value="4"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="search-column">
            <el-form-item label="群主">
              <el-button size="mini" type="primary">选择群主</el-button>
              <wx-concat :choiceConcats="owners" :show.sync="dialog.owner" @sure="e=>owners=e"/>
              <wx-tooltip class="al-width-300" :line="3">
                <wx-link tag closable v-for="(item,i) in owners" :key="i">
                  {{ item.name }}
                </wx-link>
              </wx-tooltip>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="toSearch">查询</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!--  数据  -->
    <div class="customer-data">
      <wx-table ref="tab" search-api="/wxqy/group-chat/manager/list" :labels="tableLabel">
        <template #status="{param}">
          <wx-link v-html="groupChatStatus(param)"/>
        </template>
        <template #control="{param}">
          <wx-link @click.native="chatDetail(param)">查看详情</wx-link>
        </template>
      </wx-table>
    </div>
  </div>
</template>

<script>
import {pickerOptions} from "@/api/wxqy/const";
import WxTooltip from "@/components/wxqy/wxTooltip/wxTooltip";
import WxTable from "@/components/wxqy/table/WxTable";
import WxLink from "@/components/wxqy/wxLink/wxLink";
import WxConcat from "@/components/wxqy/wxConcat/wxConcat";

export default {
  name: "group-chat-index",
  components: {WxLink, WxTable, WxTooltip, WxConcat},
  data() {
    return {
      dialog: {owner: false},
      owners: [],
      search: {},
      pickers: pickerOptions,
      tableLabel: [
        {label: '群名称', prop: 'name'}, {label: '群主', prop: 'owner'},
        {label: '群人数', prop: 'total'}, {label: '群状态', prop: 'status'},
        {label: '创建时间', prop: 'createTime'}
      ]
    }
  },
  methods: {
    chatDetail(row) {
      let id = row.id
      this.$router.push({path: "group-detail", query: {id}})
    },
    toSearch() {
      let params = Object.assign({}, this.search)
      if (params.time) {
        let time = params.time
        params['startTime'] = time[0]
        params['endTime'] = time[1]
      }
      delete params.time
      this.$refs.tab.search(params)
    },
    groupChatStatus(row) {
      let label = "正常", color = '#606266'
      if (row.status === 2) label = "群主已离职"
      if (row.status === 3) label = "离职继承中"
      if (row.status === 4) {
        label = "群已解散"
        color = '#fb8454'
      }
      return '<span style="color:' + color + ';font-size:12px;">' + label + '</span>'
    }
  }
}
</script>

<style scoped lang="scss">
.group-chat {
  padding: 20px;
}

.chat-search {
  background-color: #fff;
  padding: 20px;
  margin: 0 0 10px 0;
  border-radius: 14px;

  ::v-deep.el-date-editor {
    width: 240px;
  }

  .search-width {
    width: 240px;
  }

  .search-column {
    min-width: 420px;
  }
}
</style>
